/**
 * 添加新的布局模板
 */
import React from 'react';
import PropTypes from 'prop-types';
import { Link, Route } from 'dva/router';
import { Icon } from 'antd';

class Demo1 extends React.PureComponent {
  static testProps = {
    name: PropTypes.string,
  }
  // Breadcrumb 组件所需要的参数的传入
  // childContextTypes must be defined in order to use getChildContext().
  // static childContextTypes = {
  //   location: PropTypes.object,
  //   breadcrumbNameMap: PropTypes.object,
  // }
  // Breadcrumb 组件所需要的参数以 context 的形式传入
  // getChildContext() {
  //   const { location, navData, getRouteData } = this.props;
  //   const routeData = getRouteData('Demo1Layout');
  //   const firstMenuData = navData.reduce((arr, current) => arr.concat(current.children), []);
  //   const menuData = this.getMenuData(firstMenuData, '');
  //   const breadcrumbNameMap = {};

  //   routeData.concat(menuData).forEach((item) => {
  //     breadcrumbNameMap[item.path] = {
  //       name: item.name,
  //       component: item.component,
  //     };
  //   });
  //   return { location, breadcrumbNameMap };
  // }
  // getMenuData: 获取菜单数据
  // getMenuData = (data, parentPath) => {
  //   let arr = [];
  //   data.forEach((item) => {
  //     if (item.children) {
  //       arr.push({ path: `${parentPath}/${item.path}`, name: item.name });
  //       arr = arr.concat(this.getMenuData(item.children, `${parentPath}/${item.path}`));
  //     }
  //   });
  //   return arr;
  // };

  render() {
    // getRouteData 是 src/utils/utils.js 中的方法，他可以帮助你从之前配置的数据文件 src/common/nav.js 读出指定布局相关的路由信息，
    // 进而生成路由配置，传入的参数就是每个 layout 模板独有的标记。
    const { getRouteData } = this.props;
    return (
      <div>
        <h4>开始新的模板探索</h4>
        <div>
          <Icon type="frown-o" />
        </div>
        <h4>导航测试</h4>
        <div>
          <Link to="/">
            <span>回到主页面</span>
          </Link>
        </div>
        {/* 负责 Route 相关：生成相关路由 */}
        {
          getRouteData('Demo1Layout').map(item => (
            <Route
              exact={item.exact}
              key={item.path}
              path={item.path}
              component={item.component}
            />
          )
        )
        }
      </div>
    );
  }
}

export default Demo1;
